<template>
  <div class="my-info">
    <div class="bg-box">
      <div class="info">
        <div class="avatar">
          <div class="left">
            <img src="../assets/12.png" width="36px" height="36px" />
            <span class="name">租币当钱花</span>
          </div>
          <div class="right">
            <img src="../assets/20.png" width="16px" height="16px" />
            <span class="rule">规则</span>
          </div>
        </div>
        <div class="rent-money">
          <div class="left">
            <div class="can-use">可用租币</div>
            <div class="rent-num">1560</div>
          </div>
          <div class="right">
            <img src="../assets/21.png" width="120px" />
          </div>
        </div>
        <img
          class="info-img"
          src="../assets/19.png"
          width="120px"
          height="100px"
        />
      </div>
      <div class="content">
        <div v-for="_ in itemList" class="content-item">
          <div class="left">
            <div class="title">天天抽大奖</div>
            <div class="main">免费领回家</div>
            <div class="botton"><span style="height: 80%">Go</span></div>
          </div>
          <div class="right">
            <img src="../assets/12.png" width="60px" height="80px" />
          </div>
        </div>
      </div>
    </div>
    <div class="store">
      <div class="top">
        <div class="left">兑换商城
          <svg t="1719387616504" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2590" width="24" height="24"><path d="M512 149.333c200.299 0 362.667 162.368 362.667 362.667S712.299 874.667 512 874.667 149.333 712.299 149.333 512 311.701 149.333 512 149.333z m0 64c-164.95 0-298.667 133.718-298.667 298.667S347.051 810.667 512 810.667 810.667 676.949 810.667 512 676.949 213.333 512 213.333zM551.659 640v64h-59.947l-0.021-64h59.968z m-3.542-316.757c38.72 7.808 84.779 44.736 84.779 98.453 0 53.739-43.883 74.07-59.605 84.117-14.507 9.28-20.672 19.883-21.526 31.19l-0.106 2.816v57.514H491.69v-79.338c0-18.816 6.037-32 22.826-43.648l3.776-2.496 33.686-22.4c21.482-14.464 21.184-43.499 7.893-56.32a60.373 60.373 0 0 0-52.843-13.547c-37.376 7.339-41.685 33.707-41.941 59.307v14.485h-59.755c0-49.835 5.718-72.427 32.299-100.97 29.781-31.894 71.744-37.014 110.485-29.163z" p-id="2591" fill="#999999"></path></svg>
        </div>
        <div class="right">兑换记录
          <svg t="1719387690849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3669" width="12" height="12"><path d="M761.055557 532.128047c0.512619-0.992555 1.343475-1.823411 1.792447-2.848649 8.800538-18.304636 5.919204-40.703346-9.664077-55.424808L399.935923 139.743798c-19.264507-18.208305-49.631179-17.344765-67.872168 1.888778-18.208305 19.264507-17.375729 49.631179 1.888778 67.872168l316.960409 299.839269L335.199677 813.631716c-19.071845 18.399247-19.648112 48.767639-1.247144 67.872168 9.407768 9.791372 21.984142 14.688778 34.560516 14.688778 12.000108 0 24.000215-4.479398 33.311652-13.439914l350.048434-337.375729c0.672598-0.672598 0.927187-1.599785 1.599785-2.303346 0.512619-0.479935 1.056202-0.832576 1.567101-1.343475C757.759656 538.879828 759.199462 535.391265 761.055557 532.128047z" fill="#999999" p-id="3670"></path></svg>
        </div>
      </div>
      <div class="tag">
        <div
          class="tag-item"
          :class="{ 'tag-active': isActive === 0 }"
          @click="changeTag(0)"
        >
          全部
        </div>
        <div
          class="tag-item"
          :class="{ 'tag-active': isActive === 1 }"
          @click="changeTag(1)"
        >
          1-100
        </div>
        <div
          class="tag-item"
          :class="{ 'tag-active': isActive === 2 }"
          @click="changeTag(2)"
        >
          100-500
        </div>
        <div
          class="tag-item"
          :class="{ 'tag-active': isActive === 3 }"
          @click="changeTag(3)"
        >
          500-5000
        </div>
        <div
          class="tag-item"
          :class="{ 'tag-active': isActive === 4 }"
          @click="changeTag(4)"
        >
          5000以上
        </div>
      </div>
      <div class="pro-list">
        <div v-for="_ in proList" class="item">
          <div class="item-img"><img src="../assets/10.png" alt="" /></div>
          <div class="text">
            <div class="title">顶配iPhone Xs 256...</div>
            <div class="rent">200租币 +9.9元</div>
            <div class="count"><span style="text-decoration: line-through;">12.8元</span><span style="margin-left: 5px;">已兑2513件</span></div>
          </div>
        </div>
        
      </div>
      <div class="more">
        <div class="text"><span>赚取更多租币</span>
          <svg t="1719387316453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1449" width="16" height="16"><path d="M761.055557 532.128047c0.512619-0.992555 1.343475-1.823411 1.792447-2.848649 8.800538-18.304636 5.919204-40.703346-9.664077-55.424808L399.935923 139.743798c-19.264507-18.208305-49.631179-17.344765-67.872168 1.888778-18.208305 19.264507-17.375729 49.631179 1.888778 67.872168l316.960409 299.839269L335.199677 813.631716c-19.071845 18.399247-19.648112 48.767639-1.247144 67.872168 9.407768 9.791372 21.984142 14.688778 34.560516 14.688778 12.000108 0 24.000215-4.479398 33.311652-13.439914l350.048434-337.375729c0.672598-0.672598 0.927187-1.599785 1.599785-2.303346 0.512619-0.479935 1.056202-0.832576 1.567101-1.343475C757.759656 538.879828 759.199462 535.391265 761.055557 532.128047z" fill="#ff611c" p-id="1450"></path></svg>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const itemList = ref<number[]>(new Array(7).fill(1));
const proList = ref<number[]>(new Array(4).fill(1));
const isActive = ref<number>(0);
const changeTag = (index: number) => {
  isActive.value = index;
};
</script>

<style lang="scss" scoped>
@mixin flexBox($jc-value: center, $ac-value: center) {
  display: flex;
  justify-content: $jc-value;
  align-items: $ac-value;
}
$smallTextColor: #999999;
.my-info {
  height: calc(100% - 50px);
  background-color: #e1e4e5;
  .bg-box {
    height: 230px;
    margin-bottom: 10px;
    position: relative;
    .info {
      height: 170px;
      padding: 5px 20px;
      border-radius: 0px 0px 20px 20px;
      position: relative;
      background: linear-gradient(to bottom, #ff8a3c, #ff611c);
      .avatar {
        @include flexBox(space-between);
        margin-bottom: 10px;
        .left {
          @include flexBox();
          padding-top: 5px;
          .name {
            height: 22px;
            font-size: 14px;
            color: #fff;
            padding: 0px 5px;
            background: rgb(255, 255, 255, 0.2);
            margin-left: 5px;
          }
        }
        .right {
          @include flexBox();
          font-size: 14px;
          color: #fff;
          .rule {
            margin-left: 5px;
          }
        }
      }
      .rent-money {
        @include flexBox(space-between, flex-end);
        .left {
          .can-use {
            margin-left: 5px;
            font-size: 14px;
            color: #fff;
          }
          .rent-num {
            color: #fff;
            font-size: 36px;
            font-weight: 500;
          }
        }
        .right {
          @include flexBox(center, flex-end);
          img {
            margin-right: -10px;
          }
        }
      }
      .info-img {
        position: absolute;
        bottom: 0;
        left: 70px;
      }
    }

    .content {
      width: 100%;
      height: 100px;
      padding: 0px 20px;
      box-sizing: border-box;
      overflow-x: scroll;
      overflow-y: hidden;
      position: absolute;
      bottom: 0;
      z-index: 10;
      display: flex;

      .content-item {
        width: 180px;
        height: 100%;
        border-radius: 10px;
        background: #fff6c5;
        display: flex;
        margin-right: 10px;
        flex: 0 0 auto;
        .left {
          width: 130px;
          @include flexBox(center, flex-start);
          flex-direction: column;
          padding-left: 10px;
          .title {
            font-size: 18px;
            color: #303644;
            font-weight: 600;
            letter-spacing: 1px;
          }
          .main {
            color: #aaa0a0;
            font-size: 14px;
            padding-top: 5px;
            padding-bottom: 10px;
          }
          .botton {
            width: 70px;
            height: 30px;
            border-radius: 20px;
            background: #ffab30;
            color: #fff;
            @include flexBox();
          }
        }
        .right {
          margin-top: 20px;
          margin-right: 25px;
          width: 50px;
        }
      }
    }
  }
  .store {
    border-radius: 20px 20px 0px 0px;
    padding: 10px 15px 50px 15px;
    background: #f9f9f9;
    .top {
      padding: 15px 0px;
      @include flexBox(space-between);
      .left {
        @include flexBox();
        font-size: 18px;
        font-weight: 600;
      }
      .right {
        @include flexBox();
        color: $smallTextColor;
      }
    }
    .tag {
      @include flexBox(space-around);
      padding: 10px 0px;
      .tag-item {
        height: 25px;
        padding: 0 5px;
        border-radius: 20px;
        font-size: 14px;
        border: 1px $smallTextColor solid;
        color: $smallTextColor;
        @include flexBox();
      }
      .tag-active {
        background: #fbdae0;
        border: 1px #fff solid;
        color: #ff611c;
      }
    }
    .pro-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      .item {
        width: 175px;
        height: 240px;
        background: #fff;
        .item-img {
          position: relative;
          img {
            width: 100%;
            height: 150px;
          }
        }
        .text {
          @include flexBox(center, flex-start);
          flex-direction: column;
          padding: 5px 10px;
          .title {
            width: 150px;
            font-size: 16px;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap; 
            text-overflow: ellipsis; 
          }
          .rent {
            height: 25px;
            margin: 5px 0px;
            font-size: 16px;
            color: #ff611c;
          }
          .count{
            font-size: 12px;
            color: $smallTextColor;
          }
        }
      }
    }
    .more {
      margin: 15px 0px;
      @include flexBox();
      .text {
        @include flexBox();
        height: 30px;
        padding: 2px 15px;
        border-radius: 20px;
        line-height: 30px;
        border: 1px #ff611c solid;
        color: #ff611c;
      }
    }
  }
}
</style>
